<!--
 * @Author: your name
 * @Date: 2022-02-17 20:09:24
 * @LastEditTime: 2022-02-19 16:20:29
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \code\14.生命周期\02.React生命周期(旧).html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.React生命周期(旧)</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Counter extends React.Component{
            // 组件挂载流程
            // 构造器：组件创建时调用
            constructor(){
                console.log('Constructure')
                super()
                this.state = {
                    count: 0
                }
            }

            // 生命周期钩子函数：组件即将挂载前触发
            componentWillMount(){
                console.log('Component_Will_Mount');
            }

            //  生命周期钩子函数：组件挂载后触发
            componentDidMount(){
                console.log('Component_Did_Mount');
            }

            // 生命周期钩子函数： 组件即将卸载前触发
            componentWillUnmount(){
                console.log('Component_Will_Unmount')
            }

            //组件更新流程
            // 生命周期钩子函数：组件更新阀门，返回 true 导通更新流程，返回 false 阻塞更新流程
            shouldComponentUpdate(){
                console.log('should_Component_Update');
                return true
            }

            // 生命周期钩子函数：组件即将更新时调用
            componentWillUpdate(){
                console.log('Component_Will_Update');
            }

            // 生命周期钩子函数： 组件完成更新时调用
            componentDidUpdate(){
                console.log('Component_Did_Update')
            }

            // 生命周期钩子函数： 组件靠此函数渲染
            render(){
                console.log('render')
                return (
                    <div>
                        <h1>当前点赞数： {this.state.count}</h1>
                        <button onClick={this.add}>赞 + 1</button>
                        <button onClick={this.removeComponent}>别点赞了！</button>
                        <button onClick={this.refreshComponent}>强制刷新</button>
                    </div>
                )
            }

            add = ()=> {
                const {count} = this.state
                this.setState({
                    count: count + 1
                })
            }

            removeComponent = () => {
                ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
            }

            // 刷新组件
            refreshComponent = () => {
                //  强制更新组件，不会调用 shouldComponentUpdate()
                this.forceUpdate()
            }
        }

        ReactDOM.render(<Counter/>, document.querySelector('#app'))
    </script>
</body>

</html>